<template>
  <div class="nav-menu">
    <div :class="isCollapse ? 'logo2' :'logo' ">
      <img class="img" src="@/assets/img/141.webp" alt="" />
      <span class="title" >Vue3+TS</span>
    </div>
    <div>
      <el-menu
        class="el-menu-vertical-demo"
        :default-active="active"
        :unique-opened="true"
        v-model:collapse="isCollapse"
        background-color="#0c2136"
        text-color="#fff"
        active-text-color="#409EFF"
        :collapse-transition="false"
      >
      <!-- 一级菜单的循环遍历 -->
        <template v-for="item in userMenus" :key="item.id">
          <el-sub-menu :index="item.id + ''">
            <template #title>
              <el-icon :size="20">
                <component :is="item.icon.slice(7)"></component>
                </el-icon>
              <span>{{ item.name }}</span>
            </template>
            <!-- 二级菜单的循环遍历 -->
            <template v-for="subitem in item.children" :key="subitem.id">
              <el-menu-item :index="subitem.id + ''" @click="HandelMenuClick(subitem)">
                {{subitem.name}}
              </el-menu-item>
            </template>
          </el-sub-menu>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent ,ref, watch} from "vue";
import { useStore } from "@/store";
import {useRoute, useRouter} from 'vue-router'
import { pathMapToMenu } from '@/utils/map-menus'

export default defineComponent({
  name: "NameMenu",
  //定义 props 接收父组件 main 传递来的值
  props:{
    isFold_main:Boolean
  }, 
  setup( props) {
    const isCollapse = ref(false)
    const store = useStore()
    const router = useRouter()
    const route = useRoute()
    //通过计算属性拿到的是ref对象
    const userMenus = computed(() => store.state.login.menuinfo)

    //通过 watch 来监听 isCollap 的变化，并且把 props 变化的值付给他
    // 通过监听属性可以动态的保证 父组件更改，子组件能够监听
    watch([props,isCollapse] ,(oldValue,newValue)=> {
      isCollapse.value = !newValue[0].isFold_main
    })
    // console.log(userMenus);
    
    //动态路由的点击事件处理
    const HandelMenuClick =(item:any) => {
      router.push(item.url)
    }
    //获取当前路径
    const currentPath = route.path
    //调用函数，进行路径匹配
    const menu = pathMapToMenu(userMenus.value,currentPath)
    // console.log(userMenus.value);
    // console.log(currentPath);
    
    // console.log(menu);
    
    const active = ref(menu.id +'')
    // //激活item 项的点击事件
    // const selectItem = (item)=>{
    //   console.log(item);
      
    // }
    return {
      userMenus,
      isCollapse,
      HandelMenuClick,
      active
      
    };
  },
});
</script>

<style lang="less" scoped>
.logo {
  display: flex;
  height: 28px;
  padding: 24px 10px 8px 15px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  .img {
    height: 100%;
    margin: 0 10px;
  }
  .title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
  }
  
}
.logo2 {
  display: flex;
  height: 28px;
  padding: 15px 0 8px 11px ;
  align-items: center;
  .title {
    opacity: 0;

  }
  .img {
    height: 100%;
    margin: 0 10px;
  }
  

}
.el-menu {
  border: none;
}
.el-menu-item {
    &:hover {
      background-color: rgb(12, 161, 235);
      color: #fff;
    }
  }

</style>